<template>
    <div>
        <div class="list-head block">
            <el-form :inline="true" :model="filterform" class="demo-form-inline">
                <el-form-item label="用户名">
                    <el-input v-model="filterform.userName" placeholder="请输入查询的用户名"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                </el-form-item>
            </el-form>
            <el-button type="success" @click="showadd">新增</el-button>
        </div>
        <el-table
            :data="allList"
            style="width: 100%">
            <el-table-column
                prop="nickname"
                label="昵称"
                align="center"
                width="180">
            </el-table-column>
            <el-table-column
                prop="userName"
                align="center"
                label="用户名"
                width="180">
            </el-table-column>
            <el-table-column
            label="头像"
            align="center"
            width="180">
            <template slot-scope="scope">
                <img style="width:50px;" :src="'http://localhost:3000/'+scope.row.userPic" alt="">
            </template>
            </el-table-column>
            <el-table-column
                prop="email"
                align="center"
                label="邮箱">
            </el-table-column>
            <el-table-column
            align="right"
            label="操作">
                <template slot-scope="scope">
                    <el-button
                    :disabled="scope.row.isAdmin==1"
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
                    <el-button
                    size="mini"
                    type="danger"
                    :disabled="scope.row.isAdmin==1"
                    @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
                    <el-button size="mini" type="text" @click="toviewUserArtList(scope.row)">查看用户文章</el-button>
                </template>
            </el-table-column>
        </el-table>

        <div class="block">
            <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[5,10,15]"
            :page-size="5"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
            </el-pagination>
        </div>
        <FormField :title="alertTitle" :dialogVisible="dialogVisible" :formconfig="adddialogconfig.formconfig" :formData="adddialogconfig.formData" @formDataval="formDataval" />
    </div>
</template>
<script>
import {findListBypage} from "@/api/list"
import FormField from "./comcomponents/FormField.vue"
export default {
    components:{FormField},
    data(){
        return{
            ws:new WebSocket("ws://localhost:8181"),
            allList:[],
            pageNum:1,
            pageSize:2,
            total:10,
            dialogVisible:false,
            alertTitle:"",
            adddialogconfig:{
                formconfig:{
                    isInline:false,
                    labeWidth:100,//表单宽度
                    itemList:[//表单的list
                        {type:'input',prop:'nickname',placeholder:'请输入用户昵称',label:'昵称'},
                        {type:'input',prop:'userName',placeholder:'请输入用户名',label:'用户名',
                            // option:[{label:'选择一',value:'key1'},{label:'选择二',value:'key2'}]
                        },
                        {type:'input',prop:'userPic',placeholder:'请输入头像',label:'头像'},
                        {type:'input',prop:'password',placeholder:'请输入密码',label:'密码'},
                        // {type:'datapicker',prop:'datapicker',placeholder:'请选择日期',label:'日期',},
                        // {type:'timepicker',prop:'timepicker',placeholder:'请选择时间',label:'时间',},
                        // {type:'switch',prop:'switch',label:'开关',},
                        // {type:'checkbox',prop:'checkbox',label:'家乡',
                        //     checkboxs:[
                        //         {label:'许昌',value:'许昌'},
                        //         {label:'郑州',value:'郑州'},
                        //         {label:'洛阳',value:'洛阳'},
                        //         {label:'三门峡',value:'三门峡'},
                        //         {label:'安阳',value:'安阳'},
                        //         ]
                        // },
                        // {
                        //     type:'radio',prop:'checkbox',label:'选择家乡',
                        //     radios:[
                        //         {label:'无',value:''},
                        //         {label:'许昌',value:'许昌'},
                        //         {label:'郑州',value:'郑州'},
                        //         {label:'洛阳',value:'洛阳'},
                        //         {label:'三门峡',value:'三门峡'},
                        //         {label:'安阳',value:'安阳'},
                        //     ]
                        // },
                        // {type:'textarea',prop:'textarea',label:'区域',},
                    ],
                    rules:{//表单的匹配规则
                        nickname:[
                            { required: true, message: '请输入昵称', trigger: 'blur' },
                            ],
                        userName:[
                            { required: true, message: '请输入用户名', trigger: 'blur' },
                            ],
                        userPic:[
                            { required: true, message: '请输入头像', trigger: 'blur' },
                        ],
                        password:[
                            { required: true, message: '请输入密码', trigger: 'blur' },
                        ],
                        // datapicker:[
                        //     { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
                        //     ],
                        // timepicker:[
                        //     { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
                        //     ],
                        // checkbox:[
                        //     { type: 'array', required: true, message: '请至少选择一个内容', trigger: 'change' }
                        //     ],
                        // checkbox:[
                        //     { required: true, message: '请选择家乡', trigger: 'change' }
                        //     ],
                        // textarea:[
                        //     { required: true, message: '请填写活动形式', trigger: 'blur' }
                        //         ]
                            },
                        btnarry:[//表单按钮
                            {name:'确定',click:'handleConfirm',type:'primary'},
                            // {name:'修改',click:'update'},
                            // {name:'删除',click:'delete'},
                            {name:'取消',click:'handleExit'}
                            ]
                },
                formData:{//表单提交数据，
                    checkbox:[],//注：如果类型是checkbox，必须foemData里边提前声明数组
                },
            },
            filterform: {
                userName: '',
            }
        }
    },
    methods:{
        wsopen(){
            var obj = {
                pn:this.pageNum,
                ps:this.pageSize,
                type:"getList"
            }
            var str = JSON.stringify(obj)
            this.ws.send(str)
        },
        wsresult(e){
            var json = JSON.parse(e.data);
            this.allList= json.data
        },
        wsclose(){
            console.log("连接已关闭");
        },
        getListByPage(){
            console.log(this.pageNum,this.pageSize);
            let obj = {
                pageNum:this.pageNum,
                pageSize:this.pageSize
            }
            findListBypage(obj).then(res=>{
                if (res.status==0) {
                    this.total=res.data.total;
                    this.allList=res.data.result;
                }
            })
        },
        handleFromchange(){
            this.getListByPage()
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        },
        handleSizeChange(){
            console.log(`每页 ${val} 条`);
        },
        formDataval(val){
            console.log(val);
            this.dialogVisible=false;
        },
        showadd(){
            this.alertTitle = "新增用户"
            this.dialogVisible=true;
        },
        closedialog(){
            this.alertTitle = ""
            this.dialogVisible=false;
        },
        handleEdit(){

        },
        handleDelete(){

        },
        onSubmit(){
            console.log(this.filterform);
        },
        /**
         * 查看用户文章
         */
        toviewUserArtList(row){
            console.log(row.id);
            this.$router.push(`/myArticle?id=${row.id}`)
        }
    },
    created(){
        // this.ws.onopen=this.wsopen
        // this.ws.onmessage=this.wsresult
        // this.ws.onclose=this.wsclose
        this.getListByPage()
    },
    mounted(){
    }
}
</script>
<style scoped>
.block{
    padding: 20px;
}
.list-head{
    display: flex;
    justify-content: space-between;
    align-items: start;
}
</style>